<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogStatus === 'create' ? '新增' : dialogStatus === 'view' ? '查看' : '编辑'"
    width="700px"
    @close="reset"
  >
    <el-form
      ref="articleFormRef"
      :model="tableItem"
      :rules="rules"
      :disabled="!isDisabled"
    >
     
   
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
    <el-tab-pane
        label="模版设置"
        name="template"
      >
      <el-form-item label="所属组织" prop="orgId">
        <org-tree-select v-model="tableItem.orgId" />
      </el-form-item>
      <el-form-item label="模版名称" prop="templateName">
        <el-input v-model="tableItem.templateName"/>
      </el-form-item>
      <el-form-item label="模版描述" prop="templateDes">
        <el-input v-model="tableItem.templateDes" />
      </el-form-item>
    </el-tab-pane>

      <el-tab-pane
        label="电价设置"
        name="house"
      >
          <el-form-item
            label="是否复费率:"
            prop="elecIsMulRate"
          >
            <el-radio-group v-model="tableItem.elecIsMulRate">
              <el-radio :value="1">是</el-radio>
              <el-radio :value="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="尖电价"
            prop="elecTipPrice"
            v-if="tableItem.elecIsMulRate == '1'"
          >
            <el-input v-model="tableItem.elecTipPrice" />
          </el-form-item>

          <el-form-item
            label="峰电价"
            prop="elecPeakPrice"
            v-if="tableItem.elecIsMulRate == '1'"
          >
            <el-input v-model="tableItem.elecPeakPrice" />
          </el-form-item>

          <el-form-item
            label="平电价"
            prop="elecFlatPrice"
            v-if="tableItem.elecIsMulRate == '1'"
          >
            <el-input v-model="tableItem.elecFlatPrice" />
          </el-form-item>

          <el-form-item
            label="谷电价"
            prop="elecValleyPrice"
            v-if="tableItem.elecIsMulRate == '1'"
          >
            <el-input v-model="tableItem.elecValleyPrice" />
          </el-form-item>

          <el-form-item
            label="深谷电价"
            prop="elecRavinePrice"
            v-if="tableItem.elecIsMulRate == '1'"
          >
            <el-input v-model="tableItem.elecRavinePrice" />
          </el-form-item>

          <el-form-item
            label="单一电价"
            prop="elecSinglePrice"
            v-if="tableItem.elecIsMulRate == '2'"
          >
            <el-input v-model="tableItem.elecSinglePrice" />
          </el-form-item>
      </el-tab-pane>
      <el-tab-pane
        label="水价设置"
        name="person"
      >

          <el-form-item
            label="水价"
            prop="waterPrice"
          >
            <el-input v-model="tableItem.waterPrice" />
          </el-form-item>
      </el-tab-pane>
      <el-tab-pane
        label="气价设置"
        name="ele"
      >
          <el-form-item
            label="气价"
            prop="gasPrice"
          >
            <el-input v-model="tableItem.gasPrice" />
          </el-form-item>
      </el-tab-pane>
      <el-tab-pane
        label="容量价格设置"
        name="water"
      >
          <el-form-item
            label="容量价"
            prop="capacityPrice"
          >
            <el-input v-model="tableItem.capacityPrice" />
          </el-form-item>
      </el-tab-pane>
      <el-tab-pane
        label="需量价格设置"
        name="el"
      >
          <el-form-item
            label="需量价"
            prop="demandPrice"
          >
            <el-input v-model="tableItem.demandPrice" />
          </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
    <template
      #footer
      v-if="isDisabled"
    >
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from "vue";
import { ElMessage } from "element-plus";
import { addTemplate, editTemplate } from "@/api/settle";
import { validate } from "@/utils/validate";
import OrgTreeSelect from "@/components/OrgTreeSelect/index.vue";
const isDisabled = ref(true);
const activeName = ref("template");

const handleClick = (tab: any, event: Event) => {
  console.log(tab, event);
};

const tableItem = reactive({
  elecIsMulRate: "",
  elecTipPrice: "",
  elecPeakPrice: "",
  elecFlatPrice: "",
  elecValleyPrice: "",
  elecRavinePrice: "",
  elecSinglePrice: "",
  waterPrice: "",
  gasPrice: "",
  capacityPrice: "",
  demandPrice: "",
  orgId: "",
  templateDes:"",
  templateName:""
});

const rules = reactive({
  // title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  // category: [{ required: true, message: '请选择类别', trigger: 'blur' }],
  // author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
  // createTime: [{ required: true, message: '请选择时间', trigger: 'blur' }],
  orgId:[{ required: true, message: '请选择组织', trigger: 'change' }],
  waterPrice:[{ required: true, message: '请输入水价', trigger: 'blur' }],
  gasPrice:[{ required: true, message: '请输入气价', trigger: 'blur' }],
  capacityPrice:[{ required: true, message: '请输入容量价', trigger: 'blur' }],
  demandPrice:[{ required: true, message: '请输入需量价', trigger: 'blur' }],
  elecIsMulRate:[{ required: true, message: '请选择是否复费率', trigger: 'change' }],
});

const dialogVisible = ref(false);
const dialogStatus = ref("create");

const reset = () => {
  if (!articleFormRef) return;
  articleFormRef.value.resetFields();
};

const articleFormRef = ref(null);

const emit = defineEmits(["listChange"]);

const createData = async () => {
  const valid = await validate(articleFormRef);
  if (valid) {
    addTemplate(tableItem)
      .then(() => {
        // TODO use res data
        emit("listChange");
        dialogVisible.value = false;
        ElMessage.success("创建成功！");
      })
      .catch(() => {
        dialogVisible.value = false;
        ElMessage.error("创建失败！");
      });
  }
};

const updateData = async () => {
  const valid = await validate(articleFormRef);
  if (valid) {
    editTemplate(tableItem)
      .then(() => {
        // TODO use res data
        emit("listChange");
        dialogVisible.value = false;
        ElMessage.success("更新成功！");
      })
      .catch(() => {
        dialogVisible.value = false;
        ElMessage.error("更新失败！");
      });
  }
};

defineExpose({ dialogVisible, tableItem, dialogStatus, reset, isDisabled });
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  display: block;
}
</style>
